<template>
  <div>
    <Upload
      v-if="isFile"
      name="myfile"
      ref="uploadFile"
      :action="`/${action}`"
      :format="['pdf']"
      :accept="'.pdf'"
      :default-file-list="defaultFiles"
      :on-success="handleSuccess"
      :on-error="handleError"
      :before-upload="handleBeforeUpload"
      :on-preview="handlePreview"
      :on-format-error="handleFormatError"
      :on-remove="handleRemove"
      :max-size="maxSize"
      :on-exceeded-size="handleExceededSize"
      :disabled="uploadBtnLoading"
    >
      <el-button
        size="mini"
        icon="el-icon-upload"
        :disabled="readonly"
        :loading="uploadBtnLoading"
      >点击上传</el-button>
    </Upload>
    <div v-else>
      <UploadImg
        :isMultiple="multiple"
        :readOnly="readonly"
        :defaultList="defaultFiles"
        :uploadForQualification="action"
        :mr="16"
        :maxSize="2048"
        :maxLen="10"
        :format="['jpg', 'jpeg', 'png']"
        previewModalWidth="80%"
        @handleChangeImage="handleUploadImage"
      />
      <p v-if="!readonly">提示: 上传图片大小不能超过2048K,尺寸750px*360px</p>
    </div>
  </div>
</template>
<script>
import UploadImg from '@/components/common/upload'; // 上传组件
import { isResponseSuccess } from '@/utils/bizUtils';
export default {
  components: {
    UploadImg
  },
  props: {
    action: {
      type: String,
      default: 'sysback/fileserver/uploadForQualification'
    },
    multiple: {
      type: Boolean,
      default: false
    },
    defaultFiles: {
      type: Array,
      default: () => []
    },
    maxSize: {
      type: Number,
      default: 1024 * 100
    },
    isFile: {
      type: Boolean,
      default: true
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      uploadBtnLoading: false,
      fileList: [],
    }
  },
  watch: {
    defaultFiles: {
      handler (val) {
        this.fileList = val
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 上传图片
    handleUploadImage (imgList) {
      const imgVos = imgList.map(item => ({
        ...item,
        ...(item?.response?.retData ?? {}),
        url: typeof item.url === 'string' ? item.url : item.url.previewUrl
      }))
      this.fileList = imgVos
      this.$emit('update:defaultFiles', imgVos)
    },
    // 上传成功
    handleSuccess (res, file) {
      this.uploadBtnLoading = false
      if ((isResponseSuccess(res))) {
        const fileVo = res?.retData ?? {}
        this.fileList.push(({
          ...fileVo,
          name: file?.name
        }))
        this.$emit('update:defaultFiles', this.fileList)
      } else {
        this.$refs?.uploadFile?.clearFiles && this.$refs.uploadFile.clearFiles()
        this.$emit('update:defaultFiles', [])
        this.$message.warning('上传失败')
      }
    },
    // 上传失败
    handleError (res, file) {
      this.uploadBtnLoading = false
    },
    // 上传之前
    handleBeforeUpload () {
      this.uploadBtnLoading = true
      const check = this.fileList.length < 1
      if (!check) {
        this.uploadBtnLoading = false
        this.$message.warning('上传文件达到最大限制')
      }
      return check
    },
    // 文件格式错误
    handleFormatError () {
      this.$message.warning('文件格式错误,请上传pdf文件')
    },
    // 删除
    handleRemove () {
      this.fileList = []
      this.$emit('update:defaultFiles', [])
    },
    // 文件大小超出限制
    handleExceededSize () {
      this.uploadBtnLoading = false
      this.$message.warning(`上传文件大小不能超过${maxSize / 1024}M`)
    },
    // 预览
    handlePreview (res) {
      window.open(res?.url ?? res?.previewUrl)
    },
    // 清空状态
    clearState () {
      this.$refs.uploadFile.clearFiles()
      this.fileList = []
      this.$emit('update:defaultFiles', [])
    }
  }
}
</script>
